/*
 * @Author: zhougb9 zhougb9@qq.com
 * @Date: 2025-06-01 10:31:24
 * @LastEditors: zhougb9 zhougb9@qq.com
 * @LastEditTime: 2025-06-01 10:32:57
 * @FilePath: \LibreTVReact\src\components\VideoCard\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useRef } from 'react';
import { Card } from 'antd';
import DPlayer from 'dplayer';
import Hls from 'hls.js';


const VideoCard = ({ title, videoUrl, coverImage}) => {
    const dpContainerRef = useRef(null);
    const dpInstanceRef = useRef(null);

    useEffect(() => {
        if (dpContainerRef.current) {
            const type = videoUrl.endsWith('.m3u8') ? 'customHls' : 'auto';
            dpInstanceRef.current = new DPlayer({
                container: dpContainerRef.current,
                autoplay: false,
                screenshot: true,
                video: {
                    url: videoUrl,
                    pic: coverImage,
                    type: type,
                    customType: {
                        customHls: function (video, player) {
                            if (Hls.isSupported()) {
                                const hls = new Hls();
                                hls.loadSource(video.src);
                                hls.attachMedia(video);
                            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                                video.src = videoUrl;
                            }
                        },
                    },
                },
            });

            // 禁用右键菜单
            const videoElement = dpContainerRef.current.querySelector('video');
            if (videoElement) {
                videoElement.oncontextmenu = (e) => e.preventDefault();
            }

        }

        return () => {
            dpInstanceRef.current?.destroy();
        };
    }, [videoUrl]);

    return (
        <Card title={title} bodyStyle={{ padding: 0 }} style={{ width: '100%' }}>
            <div
                ref={dpContainerRef}
                style={{
                    width: '100%',
                    aspectRatio: '16/9',
                }}
            />
        </Card>
    );
};

export default VideoCard;

